import { ExpertSceneProps } from '@/api/expert';
import { OrderCancel } from '@/api/order';
import CutDown from '@/pages/professional/components/CutDown';
import { Button, Divider, Icon, Popup } from '@antmjs/vantui';
import { Text, View } from '@tarojs/components';
import Taro from '@tarojs/taro';
import { useMemo, useState } from 'react';
import { useRequest } from 'taro-hooks';

export default function useDetailPopup(props: {
  detail: ExpertSceneProps;
  onSuccess: Function;
}) {
  const [show, setShow] = useState<boolean>(false);

  //我预约的专家
  const expert = useMemo(
    () => props.detail?.experts?.[0] || undefined,
    [props.detail?.experts]
  );

  const { runAsync: runCancelAsync, loading } = useRequest(OrderCancel, {
    manual: true,
  });

  function renderNode() {
    return (
      <Popup
        show={show}
        position='bottom'
        round
        style={{ overflow: 'initial' }}
      >
        <Icon
          onClick={() => setShow(false)}
          name='close'
          className=' absolute right-2 -top-10  text-white text-2xl'
        />

        <View className='px-4 py-3'>
          <Text className=' text-lg font-bold text-black'>选择预约服务</Text>
        </View>
        <Divider className='m-0' />
        <View className='p-4'>
          <Text className=' text-black font-bold text-sm block mb-1'>
            服务时间
          </Text>
          <View className='flex items-center leading-none mt-2'>
            <Icon name='clock-o' className=' text-gary4 mr-1' />
            {props.detail?.appoint_time}
          </View>

          <Text className=' text-black font-bold text-sm block mb-1 mt-6'>
            预约专家
          </Text>
          {expert && (
            <View
              className=' flex items-center'
              onClick={() => {
                Taro.navigateTo({
                  url: `/pages/professional/detail?id=${expert.id}&readonly=true`,
                });
              }}
            >
              <Text className=' text-sm font-bold text-primary'>
                {expert?.name}
              </Text>
              <View
                className=' w-[248px] h-[36px] leading-[36px] pl-2 bg-cover ml-2 text-xs text-white'
                style={{
                  backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-warn-bar-2.svg)`,
                }}
              >
                ·点击可查看专家详情
              </View>
            </View>
          )}

          <Text className=' text-black font-bold text-sm block mb-1 mt-6'>
            服务价格
          </Text>
          <Text className=' block text-xs mt-2'>
            {props.detail?.beans}帮豆/次
          </Text>

          <Text className=' text-black font-bold text-sm block mb-1 mt-6'>
            预约状态
          </Text>
          <CutDown
            value={props.detail?.partin_time}
            onFinish={() => {
              props.onSuccess();
            }}
          />
        </View>
        <Divider className='m-0' />
        <View className='p-4'>
          <Button
            size='large'
            loading={loading}
            className=' bg-gary3 text-white'
            onClick={() => {
              Taro.showModal({
                title: '取消预约',
                content: `您确定要取消预约吗？专家确认前您可以无责取消, `,
                success: async ({ confirm }) => {
                  if (!confirm) return;
                  await runCancelAsync({
                    id: props.detail?.order_id,
                  });

                  Taro.showToast({
                    title: '已取消',
                    icon: 'success',
                  });

                  props.onSuccess();
                  setShow(false);
                },
              });
            }}
          >
            取消预约
          </Button>
        </View>
      </Popup>
    );
  }

  return {
    renderNode,
    open: function () {
      setShow(true);
    },
  };
}
